<script>

import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";

export default {
  components: {KtIcon},
  data() {
    return {
      loading: false,
      show: false,
      showOfSave: false,
      majorCategory:{
        id:"",
        name:"",
        code:""
      },
      bodyData:[],
      tableStyle: {
        textAlign: 'center'
      },
      requestParamOfSave: {
        id:"",
        categoryCode:"",
        code:"",
        name:"",
        description:""
      }
    }
  },
  methods: {
    open(row) {
      this.show = true;
      this.majorCategory = row;
      this.getByCategoryCode();
    },
    close() {
      this.show = false;
    },
    closeOfSave() {
      this.showOfSave = false;
    },
    getByCategoryCode() {
      this.loading = true;
      this.$kt.requestSecurity.send({
        uri: "/api-edu/admin/major/getByCategoryCode",
        method: "get",
        data: {
          categoryCode: this.majorCategory.code
        },
        stateSuccess: (res) => {
          this.bodyData = res.data;
          this.loading = false;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.loading = false;
        }
      });
    },
    openSave(row) {
      this.requestParamOfSave = row;
      this.showOfSave = true;
    },
    /**
     * 删除
     * @param row
     */
    toRemove(row) {
      this.$confirm("是否删除该专业？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let loading = this.$loading({
          lock: true,
          text: "删除中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        this.$kt.requestSecurity.send({
          uri: "/api-edu/admin/major/remove",
          method: "delete",
          data: {
            id: row.id
          },
          stateSuccess: (res) => {
            this.$message.success(res.msg);
            this.getByCategoryCode();
            loading.close();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            loading.close();
          }
        });
      });
    },
    /**
     * 保存
     */
    save() {
      let loading = this.$loading({
        lock: true,
        text: "保存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.$kt.requestSecurity.send({
        uri: "/api-edu/admin/major/save",
        method: "post",
        data: this.requestParamOfSave,
        stateSuccess: (res) => {
          this.showOfSave = false;
          this.getByCategoryCode();
          loading.close();
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          loading.close();
        }
      });
    }
  },
  watch: {

  }
}
</script>

<template>
  <el-dialog
      v-model="show"
      :title="`查看·${majorCategory.name}·的二级专业`"
      width="700px"
      @close="close">
<!--  新增  -->
    <div style="text-align: right">
      <el-button
          type="primary"
          @click="openSave({categoryCode:majorCategory.code})">
        <kt-icon
            color="#fff"
            icon="el-icon-plus" size="small"></kt-icon>新增
      </el-button>
    </div>
    <el-table
        :loading="loading"
        :data="bodyData"
              height="calc(100vh - 300px)"
      :cell-style="tableStyle"
              :header-cell-style="tableStyle">
      <el-table-column prop="name" label="专业名称"></el-table-column>
      <el-table-column prop="code" label="专业编码"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <!--  操作    -->
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button
              type="primary"
              @click="openSave(row)"
          >
            <kt-icon
                color="#fff"
                icon="el-icon-edit" size="small"></kt-icon>
          </el-button>
          <el-button
              type="danger"
              @click="toRemove(row)"
          >
            <kt-icon
                color="#fff"
                icon="el-icon-delete" size="small"></kt-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog
      v-model="showOfSave"
      :title="`二级专业`"
      width="400px"
      @close="closeOfSave">
    <el-form :model="requestParamOfSave" label-width="100px">
      <el-form-item label="专业名称">
        <el-input v-model="requestParamOfSave.name"></el-input>
      </el-form-item>
      <el-form-item label="专业编码">
        <el-input v-model="requestParamOfSave.code"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="requestParamOfSave.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>




</template>

<style lang="scss" scoped>
.tag{
  color: #f7ba2a;
}
</style>